<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>正泰电力服务后台</title>
<link rel="stylesheet" href="../../layui/css/layui.css" />
<script type="text/javascript" src="../../statics/js/jquery-1.12.4.js"></script>
<style type="text/css">
.layui-table-cell {
	height: auto;
	line-height: 38px;
}

.layui-table-main	.layui-table-cell {
	height: 38px;
	line-height: 38px;
	padding: 0 15px;
	position: relative;
	box-sizing: border-box;
}
.repay {
	padding:3px;
}
.repay:hover {
	transition: all .4s;
    background-color: #ccc;
    padding: 6px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="content-search" >
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input autocomplete="off" id="nickname" placeholder="用户昵称"
						class="layui-input" type="text" />
				</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" name="startTime" id="sstartTime" readonly="readonly" placeholder="开始时间" class="layui-input inputHeight" style="margin-top: 2px;">
					</div>
					——
					<div class="layui-input-inline">
						<input type="text" name="endTime" id="sendTime" readonly="readonly" placeholder="结束时间" class="layui-input inputHeight" style="margin-top: 2px;">
					</div>
				</div>
			<div class="layui-inline" style="margin-left:20px;">
				<button class="layui-btn" data-type="reload">查询</button>
			</div>
			<div class="layui-inline" style="color:#4ed8cb;float: right;margin: 8px 0;"> <h3 style="display: contents;">总支付金额:</h3> <input type="text" id="total_amount" style="border:0;font-size:18px;"></div>
			<div class="layui-inline" style="color:red;float: right;margin: 8px 0;"> <h3 style="display: contents;">查询金额:</h3> <input type="text" id="find_amount" style="border:0;font-size:18px;"></div>
		</div>
		<div class="tar mt10" style="text-align:right;">
			<!-- <button class="layui-btn layui-btn-normal layui-btn-small add1">+添加账号</button>  -->

		</div>
		<div class="table-listm roll-x">
			<table id="order_list" lay-filter="order_list"></table>
		</div>
	</div>
	<div id="table-pages" style="text-align:center"></div>
	<script type="text/javascript" src="../../layui/layui.js"></script>
	<script>
       function img_event(img_url){
          window.open(img_url);
       }
        var arrayObj = new Array(); ;　
    
		layui.use(['jquery', 'laydate','form','layer','laypage','table'], function(){
			var $ = layui.jquery,
			    laydate = layui.laydate,
			    layer = layui.layer,
			    table = layui.table,
			    laypage = layui.laypage;

			var startDate= laydate.render({//渲染开始时间选择  
			            elem: '#sstartTime',//通过id绑定html中插入的start
			            done: function (value, dates) {                     
			                endDate.config.min ={  
		                         year:dates.year,   
		                         month:dates.month-1, //关键  
		                         date: dates.date,   
			                };      
			            }  
			        });  
			       var endDate= laydate.render({//渲染结束时间选择  
			            elem: '#sendTime',//通过id绑定html中插入的end  
			            done: function (value, dates) {  
			                startDate.config.max={  
			                    year:dates.year,   
			                    month:dates.month-1,//关键   
			                    date: dates.date,   
			            }  
			           }  
			        });
 
		table.render({
			elem: '#order_list',
			height: 'full-100',
			id:'order_list_id',
			url: '../../web/order_list',
			toolbar: '#toolbarDemo',
			page: true ,
			loading: true,
			text: {
				none: '暂无相关数据'
			},
			cellMinWidth: 80,
			cols: [
				[//{type: 'numbers', title: '序号', width: '30'},
				{field: 'id',
				 title: 'ID',
				 width:75,
				 sort: true
				},
				{field: 'amount',title: '红包金额',width: 100},
				{field: 'createtime', title: '创建时间', width: 207,
					templet:function (d) { 
					      return  new Date(d.createtime).toLocaleString();
					 }
				},
				{field: 'msg', title: '信息', width:225},
				{field: 'wx_nickname', title: '用户昵称', width: 125},
				{field: 'wx_avatar_url', title: '用户头像', width: 125,
				templet:function(d){
					return"<img  src="+d.wx_avatar_url+"  />"
				}},
				{field: 'orderNo', title: '订单号', width:125},
				{field: 'order_status', title: '订单状态', width: 153,
					templet:function(d){
					if(d.order_status==-1){
						return "<button type='button' class='repay' id='repay' lay-event='repay_event'>支付失败</button>"
					}else{
						return "<span>支付成功</span>"
					}
				}},
		        {field: 'paymentNo', title: 'paymentNo', width:150}, 
		        {field: 'project_id', title: '项目id', width: 100},
		        {field: 'project_name', title: '项目名称', width: 200}, 
				{field: 'type',title:'type',width:100
				},
				{
					field: 'describe_info',
					width: '270',
					title: '描述信息'
					
				},
				]
			],
			done:function(res){
			    $("#total_amount").val(res.total_amount+"元");
			    var len1=$("#total_amount").val().length;
				$("#total_amount").css('width', len1*10+20 + 'px')
			    if(res.find_amount==null){
			    	$("#find_amount").val("0元");
					var len2=$("#find_amount").val().length;
					$("#find_amount").css('width', len2*10+20 + 'px')
			    }else{
			    	$("#find_amount").val(res.find_amount+"元");
					var len2=$("#find_amount").val().length;
					$("#find_amount").css('width', len2*10+20 + 'px')
			    }
			    
			},
			request: {
				pageName: 'page',
				limitName: 'size'
			},
			limit: 10,
			limits: [10, 20, 30, 40, 50]
			
			});
			
		   var active =
              {
                  reload: function () {
                      var nickname = $('#nickname').val();//获取输入框的值
					  var startTime=$('#sstartTime').val();
					  var endTime=$('#sendTime').val();
					 /*  if(nickname==''&&startTime ==''&&endTime==''){
					  	layer.msg("请输入查询条件", {icon: 5,time:1000});return ;
					  }; */
                      if(startTime ==''){
                      	if(endTime!='')
                      		{
                    			layer.msg("请输入开始时间", {icon: 5,time:1000});return ;
                      		}
                             
                      }
                      if(startTime !=''){
                      	if(endTime=='')
                      		{
                    			layer.msg("请输入结束时间", {icon: 5,time:1000});return ;
                      		}
                             
                      }
                    //执行重载
                      table.reload('order_list_id',
                      {
                          where:{ 
								nickname: nickname,
								startTime:startTime,
								endTime:endTime
								}, //这里传参  向后台
	                      url: '../../web/find_order_by_name'//后台做模糊搜索接口路径
		                  , method: 'post'
                        });
                  }
              };

 			//这个是用于创建点击事件的实例
            $('.content-search  .layui-btn').on('click', function ()
            {
                var type = $(this).data('type'); ////////////////   alert(type);   alert(active[type]);  alert(active[type].call(this));
                active[type] ? active[type].call(this) : '';
            });
            
            
			//表格按钮监听
            table.on("tool(order_list)", function (e) {
                  var d = e.data;  
                  var lock = false;
                  //alert(e.event);
                  if (e.event == "repay_event") {
	                     id= d.id  ;
	                     layer.open({
							  content: '是否重新发送红包？'
							  ,btn: ['确定', '取消']
							  ,yes: function(index, layero){
								    	//按钮【按钮一】的回调
							            if(!lock){
							            lock=true;
							            $.ajax({
							                    type : "POST",
							                    url : '../../web/***',
							                    //async:true,
							                    data : {
							                        id:id
							                    },
							                    dataType : "json",
							                    success : function(data) {
						                             if(data.status==false){
						                            	 layer.msg(data.msg, {icon: 5,time:1500});
												     }else{
												         layer.msg(data.msg, {icon: 1,time:1500});
												         //执行重载
									                      table.reload('order_list_id');
												     }
							                    }
							             });
							            }else{
							            	alert("请求处理中！");
							            }
							  }
							  ,btn2: function(index, layero){
							    //按钮【按钮二】的回调
							    layer.closeAll(index);
							    //return false 开启该代码可禁止点击该按钮关闭
							  }
							  ,cancel: function(){ 
							    //右上角关闭回调
							    //return false 开启该代码可禁止点击该按钮关闭
							  }
							});
                  }
            });			
			
		});
	</script>
    <script type="text/html" id="toolbarDemo">
 		
	</script>

</body>

</html>
















